<template>
  <div class="dashboard-container">
    <div class="app-container">

      <!-- 头部 -->
      <el-card style=" border-bottom: 1px solid rgba(195, 185, 185, 0.607); ;">
        <el-row type="flex" justify="space-between" width="100%">
          <el-col>
            <el-button
              type="primary"
              @click="addRoleFn"
            >添加信息</el-button>
          </el-col>

          <el-col>
            <el-row type="flex" justify="space-between">
              <el-input v-model="input" placeholder="请输入关键字" />
              <el-button type="primary" plain @click="searchInfo">筛选</el-button>
            </el-row>
          </el-col>

        </el-row>

      </el-card>

      <el-card v-loading="loading" style="margin-top:20px">
        <!-- 表单 -->
        <el-table
          :data="tableData"
          style="width: 100%"
          border
          div
          class="ql-editor content-detail"
        >
          <el-table-column
            prop="title"
            label="标题"
            width="280"
          />
          <el-table-column prop="content" label="内容">
            <template v-slot="{row}">
              <div v-html="row.content" />
            </template>
          </el-table-column>

          <el-table-column
            label="操作"
            width="300"
          ><template slot-scope="{ row }">
            <el-button
              size="small"
              type="primary"
              @click="updatePages(row.id)"
            >编辑</el-button>
            <el-button
              size="small"
              type="danger"
              @click="delRoleFn(row.id)"
            >删除</el-button>
          </template>
          </el-table-column>

        </el-table>

      </el-card>

      <!-- 分页 -->
      <el-row type="flex" justify="center" align="middle" style="height: 60px">
        <el-pagination
          layout="total, prev, pager, next"
          :page-size="page.size"

          :total="page.total"
          @current-change="changePage"
        />
      </el-row>
      <!-- 新增弹窗 -->
      <el-dialog :visible="showDialog" :title="formData.id ? '编辑' : '新增'" @close="closeFn">

        <el-form ref="form" label-width="80px" :model="formData" :rules="rules">

          <el-form-item label="标题" prop="title">
            <el-input v-model="formData.title" placeholder="标题" />
          </el-form-item>

          <el-form-item label="内容" prop="content">
            <VueEditor v-model="formData.content" />
          </el-form-item>

        </el-form>
        <span slot="footer">
          <el-row type="flex" justify="end">
            <el-button size="small" type="primary" @click="addRoleIf"> 确定</el-button>
            <el-button size="small" @click="closeFn">取消</el-button>
          </el-row>
        </span>

      </el-dialog>

    </div>
  </div>
</template>

<script>
import { getPagesList, delPages, getPages, updatePages, addPagesList, searchPages, getPagesListbgm } from '@/api/pages'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { VueEditor } from 'vue2-editor'

export default {
  components: {
    VueEditor

  },
  data() {
    return {
      loading: false,
      tableData: [],
      formData: {
        title: '',
        content: ''
      },
      input: '',
      page: {
        page: 0, // 当前页码
        size: 3,
        total: 10 // 总数
      },
      showDialog: false,
      rules: {
        title: [{ required: true, message: '请输入面经标题', trigger: 'blur' }],
        content: [{ required: true, message: '请输入内容', trigger: 'blur' }]
      }
    }
  },

  created() {
    // 调用分页接口获取数据
    this.getPagesList()
  },
  methods: {

    // 获取列表全部数据计算出条数
    async getPagesListbgm() {
      const resdata = await getPagesListbgm()
      // console.log(136, resdata)
      this.page.total = resdata.length
      // this.tableData = resdata
    },

    // 新增弹窗
    addRoleFn() {
      this.showDialog = true
    },
    // 新增员工
    async addRoleIf() {
      await this.$refs.form.validate()
      if (this.formData.id) {
        // console.log(this.formData.id)
        // 编辑
        await updatePages(this.formData)
      } else {
        // 新增
        await addPagesList(this.formData)
        // this.Message.success('添加成功')
      }

      // 关闭重置弹窗
      this.closeFn()
      // 重新拉取数据
      this.getPagesList()
    },

    // 筛选
    async  searchInfo() {
      // this.tableData.content = this.input
      // 判断输入框是否为空
      if (this.input === '') {
        this.page.page = 0
        this.page.size = 3
        this.getPagesList()
      } else {
        // 调用接口

        // this.page.page = 0
        this.tableData = await searchPages(this.input)

        this.page.total = this.tableData.length
        this.page.size = this.tableData.length
        console.log(186, this.tableData.length)
        // console.log(166, searchPages(this.input))
      }

      this.input = ''
    },

    // 关闭弹窗
    closeFn() {
      // 清空表单
      this.formData = {
        title: '',
        content: ''
      }
      // 关闭效验
      this.$refs.form.resetFields()
      // 关闭弹窗
      this.showDialog = false
    },

    // 分页功能
    changePage(newPage) {
      console.log(204, newPage)
      this.page.page = (newPage - 1) * 3
      console.log(192, this.page.page)
      this.getPagesList()
    },
    // 获取列表渲染页面
    async getPagesList() {
      // 加载符号
      this.loading = true
      // 计算出total总数
      this.getPagesListbgm()
      const res = await getPagesList(this.page.size, this.page.page)
      // this.page.total = res.length
      // console.log(201, res)

      this.tableData = res
      // this.tableData = await getPagesList()
      // console.log(this.tableData)
      this.loading = false
    },

    // 删除数据
    async delRoleFn(id) {
      // console.log(95, id)
      //  提示
      this.$confirm('确认删除该角色吗', {
        type: 'warning'
      })
        .then(async() => {
          // 只有点击了确定 才能进入到下方
          await delPages(id) // 调用删除接口
          // 判断是否在最后一页最后一条数据或者第一页
          if (this.tableData.length === 1 && this.page.page !== 0) {
            this.page.page -= 3
          }
          this.$message.success('删除成功')
          this.getPagesList() // 重新加载数据
          // console.log('删除成功')
        })
        .catch((err) => {
          console.log('取消了', err)
          this.$message.info('取消了')
        })
    },
    // 编辑数据回显
    async updatePages(id) {
      // 弹窗显示
      this.showDialog = true
      // 回显表单
      this.formData = await getPages(id)
    }

  }

}
</script>

<style lang="scss" scoped>

</style>
